<template>
    <div>
        <div class="topNav">
            <div class="searchBox">
                <i class="iconfont icon-fangdajing" />
                <span>搜索</span>
            </div>
        </div>
        <div class="tabBox">
            <van-tabs v-model="active">
                <van-tab v-for="(item, index) in channelsList" :key="index" :title="item.name" :name="item.id" />
            </van-tabs>
            <div class="desiedBtn" @click="$router.push('/channelEdit')">
                <van-icon name="apps-o" />
            </div>
        </div>
        <div class="mainBox">
            <van-pull-refresh v-model="isLoading" @refresh="refresh">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload">
                    <div class="newsListBox" v-for="(item, index) in newsList" :key="index"
                        @click="$router.push('/content?id=' + item.art_id)">
                        <!-- 无图类新闻 -->
                        <div class="noImageBox" v-if="item.cover.type == 0">
                            <div class="newsTitle">{{item.title}}</div>
                            <div class="newsMain">
                                <span class="isTop" v-if="item.is_top !== 0">置顶</span>
                                <span class="author">{{item.aut_name}}</span>
                                <span class="commentNum">{{item.comm_count + '评论'}}</span>
                                <span class="create_time">{{dealWithTime(item.pubdate)}}</span>
                                <div class="disLikeBtn">X</div>
                            </div>
                        </div>
                        <!-- 单图类新闻 -->
                        <div class="oneImageBox" v-else-if="item.cover.type == 1">
                            <div class="leftArea">
                                <div class="newsTitle">{{item.title}}</div>
                                <div class="newsMain">
                                    <span class="isTop" v-if="item.is_top !== 0">置顶</span>
                                    <span class="author">{{item.aut_name}}</span>
                                    <span class="commentNum">{{item.comm_count + '评论'}}</span>
                                    <span class="create_time">{{dealWithTime(item.pubdate)}}</span>
                                </div>
                            </div>
                            <div class="rightArea">
                                <img :src="item.cover.images[0]" :v-lazy="item.cover.images[0]" />
                                <div class="disLikeBtn">X</div>
                            </div>
                        </div>
                        <!-- 三图类新闻 -->
                        <div class="threeImageBox" v-else-if="item.cover.type == 3">
                            <div class="newsTitle">{{item.title}}</div>
                            <div class="imageArea">
                                <img v-for="(imgSrc, index) in item.cover.images" :key="index" :src="imgSrc"
                                    :v-lazy="imgSrc" />
                            </div>
                            <div class="newsMain">
                                <span class="isTop" v-if="item.is_top !== 0">置顶</span>
                                <span class="author">{{item.aut_name}}</span>
                                <span class="commentNum">{{item.comm_count + '评论'}}</span>
                                <span class="create_time">{{dealWithTime(item.pubdate)}}</span>
                                <div class="disLikeBtn">X</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                // 新闻频道默认索引
                active: 0,
                // 新闻频道列表
                channelsList: [],
                // 新闻列表是否处于加载状态
                loading: false,
                // 新闻列表是否已加载完毕
                finished: false,
                // 新闻列表
                newsList: [],
                // 是否处在刷新的加载状态
                isLoading: false,
                // 当前频道
                channel: 0
            }
        },
        methods: {
            // 获取所有新闻频道
            async getChannels() {
                // 根据令牌判断用户是否登录
                let token = localStorage.getItem('token')
                // 如果已登录，则获取用户相关的新闻频道
                if (token !== null) {
                    let {
                        data: res
                    } = await this.$http.get('/user/channels')
                    this.channelsList = res.data.channels
                } else {
                    let {
                        data: res
                    } = await this.$http.get('/channels')
                    this.channelsList = res.data.channels
                }
            },
            // 加载更多新闻
            onload() {
                this.getNewsByChennel(this.channel, 0, true).then((res) => {
                    if (res == 'ok') {
                        this.loading = false
                    }
                })
            },
            // 获取频道对应新闻
            async getNewsByChennel(id, with_top, is_replace) {
                // 获取令牌
                let token = localStorage.getItem('token')
                // 获取当前时间的毫秒
                let timeStamp = new Date().getTime()
                // 发起请求，获取新闻数据
                let {
                    data: res
                } = await axios({
                    method: 'get',
                    url: `http://ttapi.research.itcast.cn/app/v1_1/articles?channel_id=${id}&timestamp=${timeStamp}&with_top=${with_top}`,
                    headers: {
                        Authorization: `Bearer ${token}`
                    },
                })
                // 请求成功后对数据进行处理
                if (res.message == 'OK') {
                    if (!is_replace) {
                        this.newsList = res.data.results
                    } else {
                        this.newsList.push(...res.data.results)
                    }
                    return 'ok'
                } else {
                    return 'err'
                }
            },
            // 刷新功能
            refresh() {
                this.getNewsByChennel(this.channel, 1, false).then(res => {
                    if (res == 'ok') {
                        this.isLoading = false
                    }
                })
            },
            // 处理时间
            dealWithTime(time) {
                let targetTime = new Date(time)
                let nowTime = new Date()
                if (nowTime.getFullYear() - targetTime.getFullYear() >= 1) {
                    return `${nowTime.getFullYear() - targetTime.getFullYear()}年前`
                } else if (nowTime.getMonth() - targetTime.getMonth() >= 1) {
                    return `${nowTime.getMonth() - targetTime.getMonth()}月前`
                } else if (nowTime.getDate() - targetTime.getDate() >= 1) {
                    return `${nowTime.getDate() - targetTime.getDate()}天前`
                } else if (nowTime.getHours() - targetTime.getHours() >= 1) {
                    return `${nowTime.getDate() - targetTime.getDate()}小时前`
                } else if (nowTime.getMinutes() - targetTime.getMinutes() >= 1) {
                    return `${nowTime.getMinutes() - targetTime.getMinutes()}分钟前`
                } else {
                    return '刚刚'
                }
            }
        },
        mounted() {
            // 进入页面自动获取频道列表
            this.getChannels()
            // 进入页面自动获取新闻列表
            this.getNewsByChennel(0, 1, false)
        },
        watch: {
            // 监听新闻频道的值，当值变化时，重新获取新闻列表，并滑到最上层
            active(val) {
                this.channel = val
                scroll(0, 0)
                this.getNewsByChennel(val, 0, false)
            }
        }
    }
</script>

<style lang="scss">
    .topNav {
        width: 375px;
        height: 64px;
        background-color: #3296fa;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 100;

        .searchBox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 278px;
            height: 32px;
            margin: 26px auto;
            border-radius: 16px;
            background-color: #5babfb;
            color: #fff;

            i {
                margin-top: 3px;
            }

            span {
                font-size: 15px;
                text-indent: 5px;
            }
        }
    }

    .tabBox {
        position: fixed;
        top: 64px;
        left: 0px;
        width: 375px;
        z-index: 100;

        .van-tabs {
            margin-right: 42px;
        }

        .desiedBtn {
            position: absolute;
            top: 0;
            right: 0;
            width: 42px;
            height: 42px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .mainBox {
        margin-top: 106px;
        position: relative;
    }

    .newsListBox {
        &>div {
            border-bottom: 1px solid #f8f9fa;
            font-size: 12px;
            padding: 12px 20px;
            box-sizing: border-box;
            position: relative;

            .leftArea {
                max-width: 224px;
            }

            .newsTitle {
                letter-spacing: 1px;
                color: #3a3a3a;
                font-size: 16px;
                margin-bottom: 10px;
            }

            .newsMain {
                color: #999;
                margin-left: -5px;
                position: relative;

                span {
                    margin: 0px 5px;
                }

                .isTop {
                    color: #e22829;
                }
            }
        }

        // 无图新闻
        .noImageBox {
            .newsMain {
                .disLikeBtn {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #999;
                }
            }
        }

        // 单图新闻
        .oneImageBox {
            display: flex;

            .rightArea {
                position: relative;
                margin-left: auto;

                img {
                    width: 116px;
                    height: 64px;
                }

                .disLikeBtn {
                    position: absolute;
                    bottom: -14px;
                    right: 0;
                    color: #999;
                }
            }
        }

        // 三图新闻
        .threeImageBox {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .imageArea {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                img {
                    width: 110px;
                    height: 73px;
                    margin-right: 2px;
                }
            }

            .newsMain {
                .disLikeBtn {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #999;
                }
            }
        }
    }
</style>